<template>
  <div style="margin-left:14px" class="myUpload">
    <tl-list-search ref="search" :query-param="queryParam" @search="doQuery()" :isDisplayDefaultSearch="false">
      <template slot="search">
        <el-button @click="openAddDialog" type="primary">我要反馈</el-button>
         <add-feedback ref="addFeedback"  @refresh="doRefresh" ></add-feedback>
        <el-form-item label="关键词" label-width="70px">
          <el-input v-model="queryParam.qry_key" placeholder="请输入问题的关键词" style="width:220px" clearable></el-input>
        </el-form-item>
      </template>
    </tl-list-search>
    <!--表格渲染-->
    <el-table class="tl-table" ref="mainTable"  :height="height - 150 + 'px'" v-loading="loading" :show-header="false" :data="datas" @row-dblclick="doRowDbClick" row-key="id" :border="false" fit :row-class-name="doChangeRowClassName">
      <el-table-column min-width="600px">
        <template slot-scope="scope">
          <div class="info">
            <el-image :src="image" class="logo"></el-image>
            <div>
              <p class="headTitle">
                <span style="text-overflow: ellipsis;max-width: 83%;white-space: nowrap;overflow: hidden;display: inline-block; font-size: 16px; font-weight: bold;">{{ scope.row.content }}</span>
                <span v-if="feedbackState === 1">
                  <el-tag v-if="scope.row.state === 0" type="info"  style="float: right;">未开始</el-tag>
                  <el-tag v-if="scope.row.state === 1" style="float: right;">进行中</el-tag>
                  <el-tag v-if="scope.row.state === 2" type="danger" style="float: right;">已退回</el-tag>
                  <el-tag v-if="scope.row.state === 9" type="success" style="float: right;">已解决</el-tag>
                </span>
              </p>
              <span v-if="scope.row.response === ''" style="font-size: 13px;">暂无回复</span>
              <span v-if="scope.row.response !== ''" style="font-size: 13px; text-overflow: ellipsis;max-width: 83%;white-space: nowrap;overflow: hidden;display: inline-block;">回复：{{ scope.row.response.dealpersonsuggestion }}</span>
              <span style="float: right; font-size: 10px;" v-if="scope.row.modifiedon !== null">{{ scope.row.modifiedon | formatTime() }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 列表分页 -->
    <el-row class="pagebar" ref="pager">
      <el-pagination @size-change="doChangeSize" @current-change="doChangeIndex" :current-page="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :total="pageInfo.totalCount" layout="total, sizes, prev, pager, next, jumper" background class="tl-table-pagination"> </el-pagination>
    </el-row>
    <feedback-dialog ref="feedbackDialog" @refresh="doRefresh"></feedback-dialog>
  </div>
</template>
<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import feedbackDialog from './feedbackDialog'
import addFeedback from './addFeedback'
import editImageInfo from '/src/imgs/editImage.svg'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
import { filterObjectNull } from "tap-ui/src/utils/util"
import { MMS_SYSTEM_TYPE } from '@/const/const'
export default {
  name: 'feedbackList',
  mixins: [mixin_list],
  components: { feedbackDialog, addFeedback },
  data() {
    return {
      urlPrefix: '/mms/suggestionFeedback/',
      url: {
        // 回复
        queryResponse: '/mms/response/responseList'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'state asc, modifiedon desc',
        sord: ''
      },
      reduceHeight: 280,
      iconBoolean: false,
      response: {},
      querySourceIdList: [],
      image: editImageInfo
    }
  },
  props: {
    height: {
      type: Number,
      default: 0
    },
    ispublic: {
      type: Number,
      default: 0
    },
    feedbackState: {
      type: Number,
      default: 0
    },
    refName: {
      type: String,
      default: ''
    }
  },
  computed: {
    bpaSystemFlag() {
      return this.$store.getters.microGlobalParam.systemFlag === 'bpa'
    }
  },
  methods: {
    openAddDialog() {
      this.$refs.addFeedback.isAdd = true
      this.$refs.addFeedback.visible = true
    },
    doRefresh() {
      this.doQuery()
    },
    openFeedbackDialog(id) {
      this.$refs.feedbackDialog.isAdd = false
      this.$refs.feedbackDialog.id = id
      this.$refs.feedbackDialog.visible = true
      this.$refs.feedbackDialog.parentName = this.refName
    },
    doRowDbClick(row, column, event) {
      this.openFeedbackDialog(row.id)
    },
    getQueryParams() {
      let param = {}
      if (this.superQueryParams) {
        param['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      if (this.bpaSystemFlag) {
        // 当前页面由流程文档跳入
        this.filtersInfo.systemFlag = MMS_SYSTEM_TYPE.cdmc
      }
      Object.assign(param, this.queryParam, this.sorterInfo, this.filtersInfo)
      param.currentPage = this.pageInfo.currentPage
      param.pageSize = this.pageInfo.pageSize
      if (this.ispublic === 1) {
        // 反馈广场（公开）
        param.ispublic = this.ispublic
      } else {
        // 办理历史和我的反馈
        param.qry_code = this.$store.getters.name
      }
      param.feedbackState = this.feedbackState
      return filterObjectNull(param)
    }
  }
}
</script>

<style scoped lang="scss">
.no-view-float {
  float: left;
}
.info {
  height: 55px;
}
.logo {
  font-size: 55px;
  float: left;
  margin-right: 20px;
  width: 50px;
  height: 50px;
}
.no-view {
  border-width: 0px;
  width: 26px;
  height: 26px;
  margin-bottom: -4px;
  margin-left: 20px;
}
.light {
  font-size: 14px;
  color: #999999;

  .image-class {
    height: 20px;
    width: 15px;
    margin-right: 5px;
    padding-top: 5px;
    float: left;
  }

  .text-class {
    display: block;
    float: left;
    height: 20px;
    width: 45px;
  }

  .split-class {
    display: block;
    float: left;
    height: 20px;
    width: 25px;
  }
}

.headTitle {
  font-family: '苹方-简 ', '苹方-简', sans-serif;
  height: 23px;
  font-style: normal;
  font-size: 16px;
  letter-spacing: normal;
  color: #333333;
  margin-bottom: 10px;
}

.simple-pager {
  font-family: '苹方-简 ', '苹方-简', sans-serif;

  font-style: normal;
  font-size: 18px;
  color: #333333;
  margin-top: 15px;
}

.save-all {
  position: fixed;
  line-height: 16px;
  text-align: center;
  padding: 9px 0;
  cursor: pointer;
  z-index: 30000;
  bottom: 40%;
  right: 50px;
  font-size: 13px;

  width: 56px;
  height: 56px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  -moz-box-shadow: 0px 0px 5px #00000059;
  -webkit-box-shadow: 0px 0px 5px #00000059;
  box-shadow: 0px 0px 5px #00000059;
}

.upload-icon-class {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 33px;
  height: 33px;
  margin-top: 9px;
  margin-left: 11px;
}
.content-icon {
  position: absolute;
  top: 20px;
  right: 50px;
  width: 100px;
  height: 60px;
}
.favorites-icon {
  width: 18px;
  height: 18px;
  float: left;
}
.favorites-word {
  width: 70px;
  float: left;
  margin-top: 2px;
  margin-left: 10px;
  font-family: '苹方-简 中等', '苹方-简', sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 8px;
  color: #0a6ed2;
  position: absolute;
  left: 20px;
  top: -4px;
}
.tl-filter {
  margin-left: 14px;
}
.filter-button {
  position: absolute;
  right: 20px;
}

/deep/ .el-badge__content.is-fixed.is-dot {
  right: -3px;
  height: 12px;
  width: 12px;
}

/deep/ .el-dropdown-link {
  cursor: pointer;
  color: #0a6ed2;
}

/deep/ .el-dropdown {
  display: inline-block;
  position: relative;
  color: #606266;
  font-size: 14px;
  margin-left: 17px;
}

/deep/ .selected-filter-condition .el-scrollbar {
  height: 70px;
  overflow: hidden;
  position: relative;
}

/deep/ .local-toolbar .el-col {
  width: 50% !important;
}
/deep/ .local-toolbar .l-tool-button-row {
  padding-bottom: 0px;
}
.remove-span {
  background-color: #e7f1fb;
  border-color: #cee2f6;
  display: inline-block;
  padding: 0 10px;
  font-size: 12px;
  color: #0a6ed2;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
  height: 28px;
  line-height: 26px;
  cursor: pointer;
}
</style>
